<!--  -->
<template>
 <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <div>
    {{ key }}
        <el-input @input="inputHandle" v-model="key"></el-input>
        <div class="qrcode">
            <vue-qrcode 
    :value="qrCodeValue"
    :color="{ dark: '#000000ff', light: '#ffffffff' }"
    type="image/png"
    @change="onDataUrlChange"
  />
        </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleClose">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { dialogProps } from 'element-plus';
import { reactive,defineEmits,ref,onMounted} from 'vue'
import VueQrcode from 'vue-qrcode'
import { debounce } from '../../utils/debounce';

const key=ref("");

const qrCodeValue=ref("");

console.log("子组件执行1111111111111");


 const emit= defineEmits(['close'])

const dialogVisible = ref(true)
const handleClose = (done: () => void) => {

    emit("close")
}
const inputHandle =debounce((value: string)=>{

    qrCodeValue.value=value;
    
},500)
// const inputHandle = (value: string) => {
//   console.log(value);
//   qrCodeValue.value=value;
// }

const onDataUrlChange = (dataUrl: string) => {
  console.log(dataUrl)
}
</script>
<style scoped>
</style>